<template>
	<view class="theme-item-box">
		<navigator v-if="!isMore" url="/pages/book-classify/common-class-list" class="nav-box">
			<image 
				class="pic"
				src="https://img0.baidu.com/it/u=430781126,2257084496&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500" 
				mode="aspectFill">
			</image>
			<view class="book-mask">
				书记名称
			</view>
			<view class="tab">
				3天前更新
			</view>
		</navigator>
		
		<navigator v-if="isMore" url="/pages/book-classify/book-classify" open-type="reLaunch" class="nav-box more">
			<image 
				class="pic"
				src="https://img0.baidu.com/it/u=430781126,2257084496&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500" 
				mode="aspectFill">
			</image>
			<view class="book-mask">
				<uni-icons type="more-filled" size="27" color="#fff"></uni-icons>
				<view class="text">
					更多
				</view>
			</view>
		</navigator>
		
	</view>
</template>

<script>
export default {
	name:"theme-item",
	props: {
		isMore: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			
		};
	}
}
</script>

<style lang="scss" scoped>
.theme-item-box{
	.nav-box{
		height: 340rpx;
		border-radius: 10rpx;
		overflow: hidden;
		position: relative;
		.pic{
			width: 100%;
			height: 100%;
		}
		.book-mask{
			width: 100%;
			height: 70rpx;
			position: absolute;
			bottom: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(0, 0, 0, 0.2);
			color: #fff;
			// 实现背景磨砂效果(清晰模糊调试参数即可)
			backdrop-filter: blur(20rpx);
			font-weight: 600;
			font-size: 30rpx;
		}
		.tab{
			position: absolute;
			left: 0;
			top: 0;
			background: rgba(250, 129, 90, 0.7);
			color: #fff;
			backdrop-filter: blur(20rpx);
			// 对应 30rpx / 2 = 15px
			font-size: 30rpx;
			padding: 6rpx 14rpx;
			border-radius: 0 0 20rpx 0;
			transform: scale(0.8);
			transform-origin: left top;
		}
	}
	// 继承父级（.nav-box.more不能有空格，否则就是子级）
	.nav-box.more{
		.book-mask{
			width: 100%;
			height: 100%;
			flex-direction: column;
			.text{
				font-size: 28rpx;
			}
		}
	}
}

</style>